<template>
	<view :style="{ '--color': color }">
		<view class="coupon">
			<text class="color_33 size32">优惠券</text>
			<view class="couponBox" @click.stop="Show = true">
				<view class="d-flex a-center p-right20" v-if="CouponIsShow && couponId">
					<block v-if="Sale && Sale.disMoney">
						<text class="color size26">-￥</text>
						<text class="color size36">{{ Sale.disMoney.toFixed(2) }}</text>
					</block>
				</view>
				<text class="color size32 p-right20" v-if="!couponId && coupon.length">待使用</text>
				<text class="color_99 size32 p-right20" v-if="!coupon.length">暂无可用</text>
				<text class="iconfont icon-xiangyouxiayiye color_99 size26"></text>
			</view>
		</view>

		<u-popup :show="Show" @close="Show = false" mode="bottom" :round="10" closeable>
			<view class="Wrapper">
				<view class="head">
					<view class="head_title">可用优惠券</view>
					<view class="head_sale" v-if="coupon.length">
						<block v-if="couponId && Sale.disMoney">
							<text class="Sale_txt">已选中优惠，使用优惠券{{ sheets }}张，</text>
							<text class="Sale_txt">共抵扣</text>
							<text class="color h6">￥{{ Sale.disMoney }}</text>
						</block>
						<text class="color_33 h6" v-else>请选择优惠券</text>
					</view>
				</view>

				<view class="content">
					<view class="Lists" @click="Use_couponId(item.couponId)"
						:class="{ Active: couponId == item.couponId }" v-for="(item, index) in coupon" :key="index">
						<!-- 抵用券 1 -->
						<view class="cou_Left" v-if="item.type == 1">
							<view class="d-flex a-center white">
								<text class="unit">{{ item.unit }}</text>
								<text class="bold" :class="[getPriceClass(item)]">{{ item.price }}</text>
							</view>
						</view>
						<!-- 折扣券 2 -->
						<view class="cou_Left" v-if="item.type == 2">
							<view class="d-flex a-center white">
								<text class="size66 bold">{{ item.price }}</text>
								<text class="h6 m-top28 m-left4">{{ item.priElse }}</text>
							</view>
						</view>
						<view class="cou_Center">
							<text class="ellipsis_2 cou_title">{{ item.title }}</text>
							<text class="color_99 size22">{{ item.expiryDate }}</text>
							<text class="ellipsis color_33 h6">{{ item.info }}</text>
						</view>
						<view class="cou_Rigth">
							<text class="icon-xuanzhong iconfont size28"></text>
						</view>
					</view>

					<emptys empty="coupon" v-if="!coupon.length" title="~暂无可用优惠券~"></emptys>
				</view>
				<view class="footer" v-if="coupon.length">
					<view class="newCreat" @click="Show = false">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['pageData', 'Sale'],
		data() {
			return {
				coupon: [],
				couponId: '',
				Show: false,
				CouponIsShow: false
			}
		},

		methods: {
			getCoupons2() {
				this.$http
					.get({
						url: '/SRA_simMallApi/getCoupons2',
						data: {
							goods_id: this.pageData.goods_id,
							num: this.pageData.goods_num,
							vId: this.vid,
							operation_id: 0,
							carIds: this.pageData.car_id
						}
					})
					.then((res) => {
						if (res.code != 100) return this.$Toast(res.notice)
						const result = res.data || []
						this.coupon = result

						if (!result.length) return this.Acquire()

						if (result.length) this.CouponIsShow = true

						if (this.couponId) {
							const flagItem = result.find(item => item.couponId == this.couponId)
							if (!flagItem) this.Acquire()
						}
					})
			},

			Use_couponId(couponId) {
				if (this.couponId != couponId) {
					this.couponId = couponId
				} else {
					this.couponId = ''
				}
				this.$emit('Use_couponId', this.couponId)

			},
			Acquire() {
				this.couponId = ''
				this.$emit('Use_couponId', this.couponId)
			},

			getPriceClass(item) {
				return item.price >= 10000 ? 'size50' : 'size66'
			}
		},

		computed: {
			...mapState(['color', 'vid']),
			sheets() {
				if (!this.Sale || !this.Sale.usedCoupon) return
				return this.Sale.usedCoupon.length
			}
		},

		watch: {
			pageData: {
				immediate: true,
				handler(newVal) {
					if (newVal) this.getCoupons2()
				}
			}
		}
	}
</script>
<!-- 
  type  1 抵用卷 2 折扣卷 3 兑换卷 4 免邮卷 
 
 -->
<style lang="scss" scoped>
	@mixin Fleac {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Wrapper {
		width: 100%;

		.head {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			&_title {
				width: 100%;
				padding: 30rpx 0 30rpx;
				display: flex;
				justify-content: center;
				color: #000;
				font-size: 34rpx;
				border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
			}

			&_sale {
				width: 100%;
				padding: 20rpx 24rpx;

				.Sale_txt {
					color: #000;
					font-size: 24rpx;
					font-weight: normal;
				}
			}
		}

		.content {
			width: 100%;
			background-color: #f7f8fa;
			height: 800rpx;
			padding: 0 24rpx 24rpx;
			overflow-y: scroll;

			.Lists {
				width: 100%;
				height: 200rpx;
				background-color: #ffffff;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				overflow: hidden;

				.cou_Left {
					@include Fleac;
					flex-direction: column;
					width: 200rpx;
					height: 100%;
					background-image: linear-gradient(to right, #6b98db, #6a7dd6);

					.unit {
						font-size: 28rpx;
						margin-top: 22rpx;
					}
				}

				.cou_Center {
					flex: 1;
					height: 200rpx;
					padding: 14rpx 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.cou_title {
						color: #000;
						font-size: 32rpx;
					}
				}
			}

			.PointsList {
				width: 100%;
				padding: 30rpx 24rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.cou_Rigth {
				width: 34rpx;
				height: 34rpx;
				border: 1px solid #ccc;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}

			.Active {
				.cou_Rigth {
					background-color: var(--color);
					border: 1px solid var(--color);
				}
			}
		}

		.footer {
			width: 100%;
			height: 100rpx;
			@include Fleac;

			.newCreat {
				@include Fleac;
				width: 600rpx;
				height: 70rpx;
				background-color: var(--color);
				border-radius: 35rpx;
				color: #ffffff;
				font-size: 32rpx;
			}
		}
	}

	.coupon {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;

		.couponBox {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>